<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div id="box">1</div>
		<div>2</div>
		<div>3</div>

		<div class="b">4</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>

		<script src="../jq/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			$(function() {
				// 属性选择器
				// $("#box").css("background","red").html("我是jquery渲染的")
				// $("div").css("background","red").html("我是jquery渲染的")
				// $('.b').css('background','blue').html('我是类选择器')
				// $('*').css('background','blue').html('我是全部选择')
				// $('#box,.b').css('background','blue').html('我是全部选择')

				// $(' ul li').css('background','red').css('margin-top','5px')
				// $('div+ul').css('background', 'red').css('margin-top', '5px')
				// $('ul ~ li').css('background', 'red').css('margin-top', '5px')
				
				
				// 过滤器
				// $('li:first').css('fontSize','30px')  // :first 获取该元素的第一个
				// $('li:last').css('fontSize','30px')  // :last 获取该元素的最后一个
				
				// $('li:even').css('fontSize','30px')  // even 获取该元素的下标的偶数行
				// $('li:odd').css('fontSize','30px')  // odd 获取该元素的下标的奇数行
				
				
				// $('li:eq(3)').css('fontSize','30px')  // eq()匹配指定下标的元素
				// $('li:gt(3)').css('fontSize','30px')  // gt(x) 匹配所有大于x下标的元素
				
				
				$('li:gt(3)').css('fontSize','30px')  // gt(x) 匹配所有大于x下标的元素
				
			})
		</script>
	</body>
</html>
